<template>
    <div class="pagination-container">
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue'
  
  export default defineComponent({
    name: 'Pagination',
    props: {
      total: {
        required: true,
        type: Number
      },
      page: {
        type: Number,
        default: 1
      },
      limit: {
        type: Number,
        default: 10
      }
    },
    emits: ['pagination'],
    setup(props, { emit }) {
      const handleSizeChange = (val: number) => {
        emit('pagination', { page: props.page, limit: val })
      }
  
      const handleCurrentChange = (val: number) => {
        emit('pagination', { page: val, limit: props.limit })
      }
  
      return {
        handleSizeChange,
        handleCurrentChange
      }
    }
  })
  </script>
  
  <style lang="scss" scoped>
  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    text-align: right;
  }
  </style>